<script setup lang="ts">
import { onMounted } from 'vue'
import axios from 'axios'
import { ArticleResData, ArticleItem } from '../types/data'
import { ref } from 'vue';

// 接收频道id属性
const props = defineProps<{
  channel_id: number
}>()

// 定义一个 ref 响应式数据 接收 后台响应的文章列表数据，然后进行循环渲染
const list = ref<ArticleItem[]>([])

// 根据 channel_id 获取文章列表数据
onMounted(async () => {
  const res = await axios<ArticleResData>({
    method: 'GET',
    url: 'http://geek.itheima.net/v1_0/articles',
    params: {
      channel_id: props.channel_id,
      timestamp: Date.now()
    }
  })

  list.value = res.data.data.results
})

</script>

<template>
  <div class="list-box">
    <!-- 列表 -->
    <van-cell v-for="v of list" :key="v.art_id">
      <!-- 标题区域的插槽 -->
      <template #title>
        <!-- 无图模式 -->
        <div class="title-box">
          <span> {{ v.title }} </span>
        </div>

        <!-- 单图模式 -->
        <div v-if="v.cover.type === 1" class="title-box">
          <img class="thumb" :src="v.cover.images[0]" />
        </div>

        <!-- 三图模式 -->
        <div v-if="v.cover.type === 3" class="thumb-box">
          <img v-for="(v2, i) of v.cover.images" :key="i" class="thumb" :src="v2" />
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <div>
            <span>{{ v.aut_name }}</span>
            <span>{{ v.comm_count }}评论</span>
            <span>{{ v.pubdate }}</span>
          </div>
        </div>
      </template>
    </van-cell>

  </div>
</template>


<style scoped lang="less">
.list-box {
  position: fixed;
  top: 50px;
  bottom: 0;
  width: 100%;
  overflow-y: auto;
}

/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span {
  margin: 0 3px;

  &:first-child {
    margin-left: 0;
  }
}

/* 图片的样式, 矩形黄金比例：0.618 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>